<template>
<div class="home-section">
  <div class="tab-page cant-tab-page">
    <keep-alive>
      <transition name="el-fade-in-linear">
        <router-view></router-view>
      </transition>
    </keep-alive>
  </div>
  <van-tabbar class="tab-bar" v-model="$store.state.home.active" @change="tabChange" safe-area-inset-bottom v-if='$route.meta.TabbarShow'>
    <van-tabbar-item name="/home">
      <span>首页</span>
      <template #icon="props">
        <img v-if="props.active" src="../../assets/images/tab-index-active.png" />
        <img v-else src="../../assets/images/tab-index.png" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item name="/map">
      <span>地图</span>
      <template #icon="props">
        <img v-if="props.active" src="../../assets/images/tab-map-active.png" />
        <img v-else src="../../assets/images/tab-map.png" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item name="/activities">
      <span>志愿活动</span>
      <template #icon="props">
        <img v-if="props.active" src="../../assets/images/tab-task-active.png" />
        <img v-else src="../../assets/images/tab-task.png" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item name="/ground">
      <span>实践机构</span>
      <template #icon="props">
        <img v-if="props.active" src="../../assets/images/tab-scene-active.png" />
        <img v-else src="../../assets/images/tab-scene.png" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {

    }
  },
  activated() {
    // console.log(this)
  },
  methods: {
    tabChange(active) {
      const router = this.$router
      // this.$store.commit("changeTabActive",active)
      router.push({
        path: active
      })
    }
  }
}
</script>
<style scoped lang="scss">
.home-section {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .tab-page {
        &.cant-tab-page {
            height: calc(100% - 50px);
            overflow: hidden;
        }
    }
    .tab-bar {
        position: relative;
        .van-tabbar-item {
            // font-size: 14px;
        }
    }
}
</style>
